<template>
  <div>
    <div class="header-wrapper">
      <div class="search_wrap">
        <div class="address-container">
          <span class="city-text">{{curAdd}}</span>
          <i class="iconfont icon-wxbdingwei"></i>
        </div>
        <div class="search-input-wrapper">
          <div>
            <i class="iconfont icon-search"></i>
            <input class="input-content" placeholder="搜索面授课，机构..." @focus="toSearch">
          </div>
        </div>
        <div class="search-message">
          <i class="iconfont icon-pinglun" @click="toView"></i>
        </div>
      </div>
    </div>
    <div class="nav-list">
      <div v-for="(nav,index) in navList" class="nav-item" @click="changeNav(nav)"
           :class="nav==selectedNav?'nav-active':''">
        {{nav}}
      </div>
    </div>
    <div v-if="selectedNav=='公开课'" class="data-list-container">
      <div class="data-list-item" v-for="(item,index) in listItem">
        <div class="img-wrapper">
          <img :src="item.img"/>
        </div>
        <div class="data-title">{{item.title}}</div>
        <div class="desc-container">
          <div>{{item.desc}}</div>
          <div class="focus">关注</div>
        </div>
      </div>
    </div>
    <div class="recommand" v-if="selectedNav=='推荐'">
      <div class="img-wrapper">
        <img src="../static/img/swiper.png">
      </div>
      <div class="recommand-content-list">
        <div class="orgamization-recommand">机构推荐</div>
        <div class="recommand-item" v-for="(item,index) in recommandList" @click="goToDetail(item.id)">
          <div class="img-wrapper">
            <img :src="item.img"/>
          </div>
          <div class="desc-cotainer">
            <div class="content-name">{{item.name}}</div>
            <div class="content-desc">{{item.desc}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="custom" v-if="selectedNav == '定制'">
      <form class="form">
        <ul class="custom-conetnt">
          <li class="content" v-for="(item,index) in customContent">
            <p>{{item.title}}</p>
            <div class="radio-container">
              <div class="radio" v-for="(item1,index1) in item.content">
                <input type="radio" :value="item1" :name="item.name"> {{item1}}
              </div>
            </div>
          </li>
        </ul>
        <input type="button" value="确认提交" class="submit" @click="toRecommendTeacher">
      </form>
    </div>
  </div>
</template>

<script>
  import {
    XButton,
    Panel,
    Swiper,
    Toast,
    LoadingPlugin,
    SwiperItem,
    Search,
    ButtonTab,
    ButtonTabItem,
    Tabbar,
    TabbarItem,
    Group,
    Cell,
    Scroller,
    Grid,
    GridItem
  } from 'vux'
  import Vue from "vue"

  Vue.use(LoadingPlugin)
  import {getContent, getSearchContent} from "@/api/learn"

  export default {
    data() {
      return {
        navList: ["推荐", "公开课", "定制"],
        curAdd: "广州",
        selectedNav: "公开课",
        listItem: [{
          id: 1,
          img: require("../static/img/lesson.png"),
          title: "2017年考拉超刻双十二",
          desc: "12月03日 3节课"
        },
          {
            id: 2,
            img: require("../static/img/lesson2.png"),
            title: "数学同步得分王",
            desc: "12月03日 3节课"
          }],
        recommandList: [{
          id: 1,
          img: require("../static/img/recommand1.png"),
          name: "阳光家教",
          desc: "4.5分|100m"
        },
          {
            id: 2,
            img: require("../static/img/recommand2.png"),
            name: "数学同步得分王",
            desc: "4.5分|100m"
          }],
        customContent: [
          {
            title: '孩子想要提高的科目',
            name: 'subject',
            content: [
              '数学', '英语', '语文', '物理', '化学', '生物'
            ]
          }, {
            title: '您的孩子找老师的目的',
            name: 'purpose',
            content: [
              '升学考', '择校', '打基础', '提高学习的乐趣', '拔高', '其他'
            ]
          }, {
            title: '孩子想要提高的科目',
            name: 'where',
            content: [
              '自己家', '老师家', '都可以'
            ]
          }
        ]

      }

    },
    created() {


    },
    methods: {
      changeNav(nav) {
        this.selectedNav = nav
      },
      changeTarbleBar(index) {

        this.tableBarItem = this.tableBarItem.map((item) => {
          item.selected = false
          return item
        })
        this.tableBarItem[index].selected = true
      },
      goToDetail(id) {
        this.$router.push({path: `/lesson/detail?id=${id}`})
      },
      toSearch() {
        this.$router.push({path: '/search'})
      },
      toView() {
        this.$router.push({path: '/view'})
      },
      toRecommendTeacher() {
        this.$router.push({path: '/recommendteacher'})
      }
    }
  }

</script>

<style>
  body {
    background: white;
  }

  .header-wrapper {
    position: relative;
    background: #06cd56;
    padding: 20px 15px;
  }

  .search_wrap {
    position: relative;
    display: flex;
    color: white;
    height: 30px;
  }

  .search_wrap .address-container {
    position: relative;
    flex: 0 0 60px;
    margin: 0 auto;
    padding-top: 4px;
  }

  .iconfont {
    position: relative;
    font-size: 20px;
  }

  .icon-wxbdingwei {
    position: relative;
    color: white;
    font-size: 16px;
  }

  .icon-xiaoxi {
    position: relative;
    color: white;
  }

  .input-content {
    position: relative;
    width: 80%;
    float: right;
    margin-right: 5px;
    top: 8px;
    font-size: 14px;
    border-radius: 30px;
    border: none;
    outline: 0 none;
  }

  .search-input-wrapper {
    position: relative;
    top: 2px;
    flex: auto;
    margin: 0 10px;
    border-radius: 30px;
    background: white;
  }

  .search-message {
    flex: 0 0 30px;
    text-align: right;
    margin-right: 10px;
  }

  .icon-pinglun {
    font-size: 20px;
  }

  .city-text {
    position: relative;
  }

  .icon-search {
    position: relative;
    color: gray;
    margin-left: 6px;
  }

  .orgamization-recommand {
    position: relative;
    height: 20px;
    line-height: 20px;
    padding: 0 10px;
    border-left: 3px solid #06cd56;
    font-size: 14px;
  }

  .nav-list {
    position: relative;
    display: flex;
    background: #06cd56;
    padding-bottom: 10px;
    color: white;
  }

  .nav-list .nav-item {
    position: relative;
    text-align: center;
    line-height: 20px;
    height: 20px;
    flex: auto;
    padding: 4px;
    margin-right: 10px;
    border-radius: 20px;
  }

  .nav-active {
    background: white;
    color: #06cd56;
  }

  .nav-list .nav-item:first-child {
    margin-left: 10px;
  }

  .data-list-container {
    position: relative;
    margin-bottom: 60px;
  }

  .data-list-item {
    background: white;
    position: relative;
    margin-bottom: 10px;
    padding: 15px;
  }

  .data-list-item::after {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    width: 100%;
    border-bottom: 10px solid #eee;
  }

  .data-list-item:last-child:after {
    border: none;
  }

  .desc-container {
    position: relative;
    padding: 0 10px 5px 2px;
  }

  .img-wrapper {
    position: relative;
    width: 100%;
    height: 200px;
  }

  .img-wrapper img {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .data-title {
    position: relative;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 10px 0;
    padding-left: 4px;
  }

  .focus {
    position: absolute;
    padding: 0 10px;
    font-size: 14px;
    border-radius: 4px;
    right: 4px;
    top: 2px;
    text-align: center;
    color: #06cd56;
    border: 1px solid #06cd56;
  }

  .recommand-content-list {
    position: relative;
    padding: 15px;
    margin-bottom: 35px;
  }

  .recommand-item {
    position: relative;
    display: flex;
    padding: 15px 0;
  }

  .recommand-item .img-wrapper {
    flex: 0 0 150px;
    height: 100px;
    margin-right: 10px;
    border-radius: 10px;
  }

  .recommand-item .desc-cotainer {
    flex: auto;
  }

  .desc-cotainer .content-name {
    text-align: center;
    font-size: 16px;
    font-weight: 700;
  }

  .desc-cotainer .content-desc {
    position: relative;
    margin-top: 6px;
    text-align: center;
    font-size: 14px;
    color: gray;
  }

  .custom {
    position: relative;
    margin-bottom: 60px;
  }

  .custom-conetnt .content {
    padding: 15px 0;
    background: #fff;
    border-bottom: 15px solid rgb(245, 245, 245);
  }

  .custom-conetnt .content .radio-container {
    display: flex;
    flex-wrap: wrap;
  }

  .custom-conetnt .content .radio-container .radio {
    font-size: 13px;
    flex: 0 0 33.33%;
    margin: 5px 0 5px 0;
  }

  .custom .submit {
    width: 70%;
    height: 50px;
    background: #06cd56;
    box-shadow: 3px 3px 5px #ccc;
    border: 0 none;
    border-radius: 25px;
    color: #fff;
    margin: 25px auto;
    display: block;
    outline: 0 none;
  }
</style>
